<template>
    <div class="editor-container">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <router-link to="/" class="nav-logo">MD2Card</router-link>
            <div class="nav-actions">
                <div class="export-buttons" v-if="cardList.length > 0">
                    <el-dropdown>
                        <el-button type="primary" @click="exportAsPNG">导出PNG{{ cardList.length > 1 ? '(压缩包)' : '' }}</el-button>
                    </el-dropdown>
                </div>
                <el-button @click="previewFullScreen" v-if="!fullScreenVisible && cardList.length > 0">全屏预览</el-button>
                <el-button @click="fullScreenVisible = false" v-if="fullScreenVisible">取消全屏</el-button>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content" :class="{ 'fullscreen-mode': fullScreenVisible }">
            <!-- 左侧Markdown编辑器 -->
            <div class="editor-panel" v-show="!fullScreenVisible" :style="editorPanelStyle">
                <div class="vditor-container" ref="vditorContainer"></div>
            </div>

            <!-- 可拖动分隔条 -->
            <div class="resizer" v-show="!fullScreenVisible" @mousedown="startResize"></div>

            <!-- 右侧卡片预览和设置 -->
            <div class="preview-panel" :class="{ 'fullscreen-preview-panel': fullScreenVisible }">
                <!-- 卡片预览和设置上下布局 -->
                <div class="preview-settings-container">
                    <!-- 卡片预览部分 -->
                    <div class="card-preview-section">
                        <div class="card-preview-container vertical">
                            <div v-if="cardList.length === 0" class="card-preview empty-preview">
                                <div class="empty-card">卡片预览区域</div>
                            </div>
                            <div v-for="(card, index) in cardList" :key="index" class="card-preview" :style="cardStyle">
                                <div v-html="card" class="card-content"
                                    :class="!hideOverflow ? 'overflow-allowed' : 'overflow-hidden'"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 卡片设置部分 -->
                    <div class="settings-panel" v-if="!fullScreenVisible">
                        <div class="settings-section">
                            <div class="split-settings">
                                <div class="split-option">
                                    <el-checkbox v-model="hideOverflow">超出隐藏</el-checkbox>
                                </div>
                            </div>
                            <div class="size-settings">
                                <div class="paper-size-select">
                                    <span class="paper-size-select-lable">纸张尺寸:</span>
                                    <el-select v-model="selectedPaperSize" @change="applyPaperSize"
                                        placeholder="选择纸张尺寸">
                                        <el-option v-for="name in Object.keys(paperSizes)" :key="name" :value="name"
                                            :label="name"></el-option>
                                    </el-select>
                                </div>
                                <div class="scale-setting">
                                    <span>缩放:</span>
                                    <el-slider v-model="paperScale" :min="0.1" :max="2.0" :step="0.1"
                                        @change="applyPaperSize"></el-slider>
                                    <span>{{ paperScale }}x</span>
                                </div>

                            </div>
                            <div class="ratio-settings" v-if="selectedRatioVisible">
                                <div class="size-input">
                                    <span>宽度:</span>
                                    <el-input-number v-model="cardWidth" :min="200"
                                        @change="updateCardStyle"></el-input-number>
                                    <span>px</span>
                                </div>
                                <div class="size-input">
                                    <span>高度:</span>
                                    <el-input-number :readonly="cardHeightReadonly" v-model="cardHeight" :min="200"
                                        @change="updateCardStyle"></el-input-number>
                                    <span>px</span>
                                </div>
                                <div class="paper-ratio-select">
                                    <span class="paper-ratio-select-lable">比例:</span>
                                    <el-select v-model="selectedRatio" @change="applyRatio" placeholder="选择比例">
                                    <el-option value="custom" label="自定义"></el-option>
                                    <el-option value="1:1" label="1:1"></el-option>
                                    <el-option value="4:3" label="4:3"></el-option>
                                    <el-option value="3:4" label="3:4"></el-option>
                                    <el-option value="16:9" label="16:9"></el-option>
                                    <el-option value="9:16" label="9:16"></el-option>
                                </el-select>
                                </div>
                            </div>
                            <div class="style-settings">
                                <div class="style-cards">
                                    <div v-for="style in availableStyles" :key="style.name" class="style-card"
                                        :class="{ 'active': selectedStyle === style.name }"
                                        @click="selectedStyle = style.name; applyStyle()">
                                        <div class="card-title">{{ style.label }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 全屏预览区域 -->
        <div class="fullscreen-preview" v-if="fullScreenVisible">
            <!-- 这里会通过JavaScript动态填充内容 -->
        </div>
    </div>
</template>

<script setup lang="ts">
import '../styles/editor.css';
import {
    vditorContainer,
    cardList,
    fullScreenVisible,
    cardWidth,
    cardHeight,
    cardHeightReadonly,
    selectedRatio,
    selectedRatioVisible,
    selectedStyle,
    hideOverflow,
    availableStyles,
    cardStyle,
    initEditor,
    initStyles,
    applyRatio,
    applyStyle,
    previewFullScreen,
    updateCardStyle,
    exportAsPNG,
    selectedPaperSize,
    paperScale,
    applyPaperSize,
    editorPanelStyle,
    startResize,
    loadSavedPanelWidth
} from './EditorLogic';
import { paperSizes } from '../utils/unit-conversion';
import { onMounted } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';

onMounted(() => {
    loadSavedPanelWidth();
    initEditor();
    initStyles();
});
</script>

<style scoped></style>